<template>
  <div class="home">
    <div class="home_background">
      <div style="text-align: right; padding: 30px">
        <el-dropdown style="margin-right: 30px" @command="setLanguage">
          <div class="el-dropdown-link">
            <img
              style="width: 25px"
              src="@/assets/img/icon_yy.svg"
              class="m_icon"
              alt=""
            />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zh">{{
              $t("message.menu.langsZh")
            }}</el-dropdown-item>
            <el-dropdown-item command="en">{{ $t("message.menu.langsEn")}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="login_content">
      <div class="switch" v-if="!switchview" @click="getswitch()">
        <span class="switchtext">{{ $t("message.login.btnLogin")}}</span>
      </div>
      <div class="switch" v-if="switchview" @click="closeswitch()">
        <span class="switchtext">{{ $t("message.login.creatAccount")}}</span>
      </div>
      <div class="contitle">{{$t('message.welcomeTips')}}</div>
      <!-- 注册 -->
      <div class="contform" v-if="!switchview">
        <el-form ref="form" :model="form">
          <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('message.login.codezc')" name="first">
              <el-form-item style="margin-top: 20px">
                <el-input
                  v-model="form.zcphone"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  maxlength="11"
                  :placeholder="$t('message.login.phoneTips')"
                ></el-input>
              </el-form-item>

              <div class="form_code">
                <el-form-item class="passinput">
                  <el-input v-model="form.zccode" :placeholder="$t('message.login.codeTips')"></el-input>
                </el-form-item>
                <el-button
                  v-if="sendSmsstatus"
                  @click="registerSms(60)"
                  :loading="Loading"
                  class="codebtn"
                  plain
                  >{{$t('message.login.getcode')}}</el-button
                >
                <el-button v-if="!sendSmsstatus" disabled class="codebtn" plain
                  >({{ sendSmsSecond }}s){{$t('message.login.cxfscode')}}</el-button
                >
              </div>

              <el-button
                class="registerbtn"
                :loading="submitLoading"
                type="primary"
                @click="getcoderegister()"
                >{{$t('message.login.creatAccount')}}</el-button
              >
            </el-tab-pane>

            <el-tab-pane :label="$t('message.login.passwordzc')" name="second">
              <el-form-item style="margin-top: 20px">
                <el-input
                  v-model="form.mmphone"
                  :placeholder="$t('message.login.phoneTips')"
                ></el-input>
              </el-form-item>

              <el-form-item style="margin-top: 20px">
                <el-input
                  v-model="form.password"
                  show-password
                  :placeholder="$t('message.login.passwordTips')"
                ></el-input>
              </el-form-item>

              <el-form-item style="margin-top: 20px">
                <el-input
                  v-model="form.rePassword"
                  show-password
                  :placeholder="$t('message.login.zcsrpassword')"
                ></el-input>
              </el-form-item>

              <el-button class="registerbtn" @click="getregister()" type="primary"
                >{{$t('message.login.creatAccount')}}</el-button
              >
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
      <!-- 登录 -->
      <div class="contform" v-if="switchview">
        <el-form ref="form" :model="form">
          <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('message.login.codelogin')" name="first">
              <el-form-item style="margin-top: 20px">
                <el-input
                  v-model="form.dlphone"
                  :placeholder="$t('message.login.phoneTips')"
                ></el-input>
              </el-form-item>

              <div class="codecot">
                <el-form-item class="code_el">
                  <el-input v-model="form.dlcode" :placeholder="$t('message.login.passwordTips')"></el-input>
                </el-form-item>

                <el-button
                  v-if="sendSmsstatusdl"
                  @click="registerSmsdl(60)"
                  :loading="Loading"
                  class="codebtn"
                  plain
                  >{{$t('message.login.getcode')}}</el-button
                >
                <el-button v-if="!sendSmsstatusdl" disabled class="codebtn" plain
                  >({{ sendSmsSeconddl }}s){{$t('message.login.cxfscode')}}</el-button
                >
              </div>

              <el-button class="registerbtn" type="primary" @click="registerlogon"
                >{{$t('message.login.btnLogin')}}</el-button
              >
            </el-tab-pane>
            <el-tab-pane :label="$t('message.login.passwordlogin')" name="second">
              <el-form-item style="margin-top: 20px">
                <el-input
                  v-model="form.mmdlphone"
                  :placeholder="$t('message.login.phoneTips')"
                ></el-input>
              </el-form-item>

              <el-form-item style="margin-top: 42px">
                <el-input
                  v-model="form.mmdlpassword"
                  show-password
                  :placeholder="$t('message.login.passwordTips')"
                ></el-input>
              </el-form-item>

              <el-button class="registerbtn" @click="passwordlogon()" type="primary"
                >{{$t('message.login.btnLogin')}}</el-button
              >
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import config from "@/baseconfig.js";
import md5 from "js-md5";
import Cookies from "vue-cookies";
let token = "";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      activeName: "first",
      switchview: true,
      Loading: false,
      submitLoading: false,
      // 注册
      sendSmsstatus: true, //发送验证码按钮状态
      sendSmsSecond: "", //点击按钮之后，倒计时60秒
      timer: null, //倒计时
      // 登录
      sendSmsstatusdl: true, //发送验证码按钮状态
      sendSmsSeconddl: "", //点击按钮之后，倒计时60秒
      timerdl: null, //倒计时
      form: {
        zcphone: "", //手机号
        zccode: "", //验证码
        invitationCode: "84298", //企业验证码
        mmphone: "", //密码注册手机号
        password: "", //确认密码
        rePassword: "", //确认密码
        dlphone: "", //登录手机号
        dlcode: "", //登录验证码
        mmdlpassword: "", //密码登录密码
        mmdlphone: "", //密码登录手机号
      },
    };
  },
  computed: {
    lang(){
          return this.$i18n.locale
    },
  },
  mounted() {},
  created() {},
  methods: {
    setLanguage(command){
      if(this.$i18n.locale!==command){
        this.$i18n.locale = command;
        localStorage.setItem('langs',command);
        location.reload()
      }
    },
    getswitch() {
      let that = this;
      that.switchview = true;
    },
    closeswitch() {
      let that = this;
      that.switchview = false;
    },
    logon() {
      this.$router.push({ name: "newchat" });
    },
    // 注册获取验证码

    //注册发送验证码
    registerSms(TIME_COUNT) {
      if (this.form.zcphone == "") {
        this.$message({ showClose: true, message: this.$t('message.menu.perphone'), type: "error" });
      } else if (this.form.zcphone == "" || this.form.zcphone.length != 11) {
        this.$message.error(this.$t('message.menu.errphone'));
      } else {
        this.setCountDown(TIME_COUNT);
        //发送号码到后台，进行短信发送
        this.$api
          .post("/auth/verify/code/send", {
            phoneNumber: this.form.zcphone,
            usage: "register",
          })
          .then((res) => {
            this.$message({
              showClose: true,
              // message: this.$t('message.cantEmpty'),
              message:this.$t('message.menu.succcode'),
              type: "success",
            });
          });
      }
    },
    //登录设置倒计时60，禁止提交
    setCountDowndl(TIME_COUNT) {
      var millisecond = new Date().getTime();
      var expiresTime = new Date(millisecond + 60 * 1000);
      if (!this.timer) {
        this.sendSmsSeconddl = TIME_COUNT;
        this.sendSmsstatusdl = false;
        this.timerdl = setInterval(() => {
          if (this.sendSmsSeconddl > 0 && this.sendSmsSeconddl <= TIME_COUNT) {
            this.sendSmsSeconddl--;
          } else {
            this.sendSmsstatusdl = true;
            clearInterval(this.timerdl);
            this.timerdl = null;
          }
        }, 1000);
      }
    },
    //登录发送验证码
    registerSmsdl(TIME_COUNT) {
      if (this.form.dlphone == "") {
        this.$message({ showClose: true, message: this.$t('message.menu.perphone'), type: "error" });
      } else if (this.form.dlphone == "" || this.form.dlphone.length != 11) {
        this.$message.error(this.$t('message.menu.errphone'));
      } else {
        this.setCountDowndl(TIME_COUNT);
        //发送号码到后台，进行短信发送
        this.$api
          .post("/auth/verify/code/send", {
            phoneNumber: this.form.dlphone,
            usage: "login",
          })
          .then((res) => {
            this.$message({
              showClose: true,
              message: this.$t('message.menu.succcode'),
              type: "success",
            });
          });
      }
    },
    //注册设置倒计时60，禁止提交
    setCountDown(TIME_COUNT) {
      var millisecond = new Date().getTime();
      var expiresTime = new Date(millisecond + 60 * 1000);
      if (!this.timer) {
        this.sendSmsSecond = TIME_COUNT;
        this.sendSmsstatus = false;
        this.timer = setInterval(() => {
          if (this.sendSmsSecond > 0 && this.sendSmsSecond <= TIME_COUNT) {
            this.sendSmsSecond--;
          } else {
            this.sendSmsstatus = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },

    // 验证码注册
    getcoderegister() {
      let that = this;
      if (that.form.zcphone != "" && that.form.zccode != "") {
        that.submitLoading = true;
        that.$api
          .post("/auth/register", {
            phoneNumber: that.form.zcphone,
            invitationCode: that.form.invitationCode,
            password: that.form.zccode,
            loginType: "code",
          })
          .then((res) => {
            that.submitLoading = false;
            that.$message({
              showClose: true,
              message: this.$t('message.login.zhzccg'),
              type: "success",
            });
            that.switchview = true;
          });
      } else {
        this.$message({
          showClose: true,
          message: this.$t('message.menu.wszh'),
          type: "error",
        });
      }
    },
    // 密码注册
    getregister() {
      let that = this;
      if (
        that.form.mmphone != "" &&
        that.form.password != "" &&
        that.form.rePassword != ""
      ) {
        that.submitLoading = true;
        that.$api
          .post("/auth/register", {
            phoneNumber: that.form.mmphone,
            invitationCode: that.form.invitationCode,
            password: that.form.password,
            rePassword: that.form.rePassword,
          })
          .then((res) => {
            that.submitLoading = false;
            that.switchview = true;
            that.$message({
              showClose: true,
              message: this.$t('message.login.zhzccg'),
              type: "success",
            });
          });
      } else {
        this.$message({ showClose: true, message: this.$t('message.menu.wsmm'), type: "error" });
      }
    },
    // 验证码登录
    registerlogon() {
      let that = this;
      if (that.form.dlphone != "" && that.form.dlcode != "") {
        that.submitLoading = true;
        that.$api
          .post("/auth/login", {
            phoneNumber: that.form.dlphone,
            invitationCode: that.form.invitationCode,
            password: that.form.dlcode,
            loginType: "code",
          })
          .then((res) => {
            that.submitLoading = false;
            that.$api.post("/account/info", {}).then((res) => {
              this.$store.commit("login", res);
            });
            that.$router.push({ name: "index" });
          });
      } else {
        this.$message({
          showClose: true,
          message: this.$t('message.menu.wszh'),
          type: "error",
        });
      }
    },
    // 密码登录
    passwordlogon() {
      let that = this;
      if (that.form.mmdlphone != "" && that.form.mmdlpassword != "") {
        that.submitLoading = true;
        that.$api
          .post("/auth/login", {
            phoneNumber: that.form.mmdlphone,
            invitationCode: that.form.invitationCode,
            password: that.form.mmdlpassword,
            loginType: "password ",
          })
          .then((res) => {
            that.submitLoading = false;
            that.$api.post("/account/info", {}).then((res) => {
              this.$store.commit("login", res);
            });
            that.$router.push({ name: "index" });
          })
          .catch((e) => {});
      } else {
        this.$message({ showClose: true, message: this.$t('message.menu.wsmm'), type: "error" });
      }
    },
  },
};
</script>
<style lang="stylus" scoped>
.home
  display flex
  flex-direction column
  align-items center
  justify-content center
  min-height calc(100vh - 0px)
  .home_background
    position:absolute
    top 0
    bottom 0
    left 0
    right 0
    background-size cover
    background-position center
    background-repeat no-repeat
    background-image url('~@/assets/icon/bg_login.png')
  /* 公告card */
  >>>.el-card__body
    padding 0px 20px
    position absolute
    top 0
    right 0
    left 0
    display flex
    align-items center
    background #fff
    opacity 0.7

  /* 公告title */
  .tips
      line-height 50px
      color #606266
      font-weight bold

  .home_login_content
    position: relative

    .login_form
      margin 0 auto
      padding 20px 30px 20px 30px
      background-color rgba(255, 255, 255, 0.9)
      border-radius 20px
      max-width 940px
      .login_main
        width 390px
        padding 0 30px 0 20px
        box-sizing border-box
        .code_info
          position absolute
          right 0
          top 0
        .login_title
          font-size 26px
          color $colorDeepPrimary
          text-align center
          padding 10px 0
          margin-bottom 20px
        /deep/ .el-button
          display block
          width 100%
          margin 8px 0
        .link
          display block
          text-align center
          height $titleSize
          line-height $titleSize
          color $colorBle
          padding 3px
          background none
          border 0
      .login_meg
        width 500px
        .login_title
          font-size 26px
          color $colorDeepPrimary
          text-align center
          padding 10px 0
      .notice_items
        .notice
          padding 10px
          display flex
          cursor pointer
          .date
            width 48px
            margin-right 10px
            display flex
            flex-direction column
            justify-content center
            span
              display block
              padding 5px 0
            .month
              color $yellow
              font-size $normalSize
              text-align center
            .day
              background-color $yellow
              color $white
              text-align center
              padding 3px 0
          .main
            flex 1
            width 0
            .title
              color $darkblack
              font-weight bold
              padding 5px 0 10px
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
            .word
              color $gray
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              -webkit-box-orient vertical
              -webkit-line-clamp 2
>>>.el-dialog__header
  padding 0
>>>.el-dialog__body
  padding 15px 20px
.login_tips_alert
  font-size 16px
  margin-bottom 15px
  span
    font-size 14px
.login_content{
      z-index: 1;
      width: 400px;
      height: 450px;
      padding: 30px 50px;
      background: #fff;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
}
.switch{
    background:#0091FF;
    width: 140px;
    height: 140px;
    position: absolute;
    right: -71px;
    top: -71px;
    cursor:pointer;
    transform: rotate(45deg);
}
.switchtext{
    position: absolute;
    top: 105px;
    width: 54px;
    text-align: center;
    left: 45px;
    transform: rotate(-45deg);
    color: #fff;
}
.contitle{
  font-size:20px;
  font-weight:600;
  margin-bottom: 50px;
}
>>>.el-tabs__nav-wrap is-top{
  width:240px;
}
>>>.el-tabs__nav-wrap::after{
  background-color:#fff !important;
}
.form_code{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.passinput{
  margin-top: 20px;
  width: 250px;
}
.codebtn{
  height: 40px;
  width: 130px;
  color:#C0C7DA
}
.registerbtn{
  width: 100%;
  margin-top: 50px;
  height: 50px;
  font-size:16px
}
.codecot{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.code_el{
  margin-top: 20px;
  width: 250px;
}
</style>
<style></style>
